<script>
import {
  Edit,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  components:{
    Edit,
  },
  computed:{
    Edit(){
      return Edit
    },
  },
  data(){
    return  {
      tableData:[],
      StateOr:false,
      AddressDialog:false,
      form:{
        order_state:[],
        dilivery_address:[],
        order_id:0,
      },
      formLabelWidth:'120 px',
    }
  },
  methods:{
    ChangeAddress(){
      this.$http.get("http://localhost:8080/order/UpdateAddress", {params:{
          dilivery_address:this.form.dilivery_address,
          order_id:this.form.order_id,
        }}).then((res)=>{
        console.log(res.data);
        if(res.data==1){
          console.log("修改成功！");
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
          this.LoadAwaitingShipmentData()
        }
        else{
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
        }
        this.AddressDialog = false ;
      }).catch(function(err){
        console.log(err);
      })

    },
    ChangeStatement(){
      this.$http.get("http://localhost:8080/order/UpdateState", {params:{
          order_state:this.form.order_state,
          order_id:this.form.order_id,
        }}).then((res)=>{
        console.log(res.data);
        if(res.data==1){
          console.log("修改成功！");
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
          this.LoadAwaitingShipmentData()
        }
        else{
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
        }
        this.StateOr = false ;
      }).catch(function(err){
        console.log(err);
      })

    },
    ChangeAddressDialog(order_id,dilivery_address){
      this.AddressDialog = true;
      this.form.order_id = order_id;
      this.form.dilivery_address = dilivery_address;
    },
    ChangeState(order_id,order_state){
      this.StateOr = true;
      this.form.order_id = order_id;
      order_state="在途中";
      this.form.order_state = order_state;
    },
    LoadAwaitingShipmentData(){
      this.$http.get("http://localhost:8080/order/AwaitingShipment").then((res)=>{
        this.tableData = res.data;
        console.log(this.tableData)
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  mounted() {
    this.LoadAwaitingShipmentData();
  }
}
</script>

<template>
  <el-card style="max-width:100%">
    <template #header>
      <div class="card-header">
        <span>待发货</span>
      </div>
    </template>
    <el-table :data="tableData" height="500" style="width: 100%">
      <el-table-column prop="order_id" label="订单编号" width="80" />
      <el-table-column prop="goods_image" label="商品图片" width="180">
        <template #default="{ row }">
          <img v-if="row.goods_image"
               :src="`http://localhost:8080/image/upload/${row.goods_image}`"
               alt="goods_image"
               style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column prop="goods_description" label="商品介绍" width="180" />
      <el-table-column prop="count" label="购买数量" width="80" />
      <el-table-column prop="goods_price" label="单价" width="80" />
      <el-table-column prop="subtotal" label="实际支付" width="80" />
      <el-table-column prop="delivery_address" label="收货地址" width="180" />
      <el-table-column fixed="right" label="操作" width="270">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-button type="primary" :icon="Edit" circle @click.native="ChangeAddressDialog(scope.row.order_id,scope.row.delivery_address)"/>
          <el-button type="primary" default @click="ChangeState(scope.row.order_id,scope.row.order_state)">
            确认发货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>


  <!--对话框：拒绝-->
  <el-dialog
      v-model="AddressDialog"
      title="修改地址"
      width="600"
      align-center
  >
    <el-form-item label="收货地址" :label-width="formLabelWidth">
      <el-input v-model="form.dilivery_address" autocomplete="off" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="AddressDialog= false">取消</el-button>
        <el-button type="primary" @click="ChangeAddress()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
<!--确认发货-->
  <el-dialog
      v-model="StateOr"
      title=""
      width="300px"
      height="300px"
      align-center
  >
    {{"请确认是否完成发货"}}
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="StateOr= false">取消</el-button>
        <el-button type="primary" @click="ChangeStatement()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>

</style>